<template>
	<view class="bg-white" style="height: 100%;">
		<cu-custom :isBack="true" bgColor="bg-blue">
			<block slot="content">轧制监控</block>
			<template slot="backText">
				<text class="cuIcon-back" @tap="beforePage"></text>
			</template>
		</cu-custom>
		<view class="width100 lineUp">
			<image src="../../../static/img/rollFefore.png" mode="widthFix" class="lineBefore"></image>
			<!-- 温度 -->
			<view class="RDTtempPosition positionAbsolute font-size24">
				<text class="u-font-weight6">RDT</text>
				<text class="u-font-weight margin-left-10">{{cuInfo.temp}}℃</text>
			</view>
			<!-- 钢卷状态 -->
			<view class="cuCoil positionAbsolute" v-show="cuInfo.on > 0 || cuInfo.pass > 1"></view>
			<!-- 悬浮框 -->
			<view class="positionAbsolute bg-white coilInfo font-size22 cuPosition" v-show="cuInfo.on > 0 || cuInfo.pass > 1">
				<view class=" bg-blue u-font-weight7 text-white coilInfoTitle">
					<text>卷号</text>
					<text class="margin-left-10">{{cuInfo.coilNo}}</text>
				</view>
				<view class="flex coilInfoMain">
					<view class="">
						<text class="u-font-weight6">钢种</text>
						<text class="u-font-weight">{{cuInfo.state}}</text>
					</view>
					<view class="" style="margin-left: 20upx;">
						<text class="u-font-weight6">规格</text>
						<text class="u-font-weight">{{cuInfo.gui}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="width100 culine flex justify-center">
			<view class="flex">
				<view class="font-size24 u-font-weight">粗轧区域</view>
				<view class="cuState font-size22">{{cuState}}</view>
			</view>
		</view>
		<view class="width100 lineUp">
			<image src="../../../static/img/rollAfter.png" mode="widthFix" class="lineBefore"></image>
			<view class="positionAbsolute bg-white coilInfo font-size22 jingPosition" v-show="jingInfo.F1on == 1 || jingInfo.F2on == 1 || jingInfo.F3on == 1 || jingInfo.F4on == 1 || jingInfo.F5on == 1 || jingInfo.F6on == 1 || jingInfo.F7on == 1">
				<view class=" bg-blue u-font-weight7 text-white coilInfoTitle">
					<text>卷号</text>
					<text class="margin-left-10">{{jingInfo.coilNo}}</text>
				</view>
				<view class="flex coilInfoMain">
					<view class="">
						<text class="u-font-weight6">钢种</text>
						<text class="u-font-weight">{{jingInfo.state}}</text>
					</view>
					<view class="" style="margin-left: 20upx;">
						<text class="u-font-weight6">规格</text>
						<text class="u-font-weight">{{jingInfo.gui}}</text>
					</view>
				</view>
			</view>
			<!-- 精轧钢卷状态 -->
			<view class="flex jingCoil positionAbsolute">
				<view class="F1Coil" v-show="jingInfo.F1on == 1"></view>
				<view class="F1Coil" v-show="jingInfo.F2on == 1"></view>
				<view class="F1Coil" v-show="jingInfo.F3on == 1"></view>
				<view class="F1Coil" v-show="jingInfo.F4on == 1"></view>
				<view class="F1Coil" v-show="jingInfo.F5on == 1"></view>
				<view class="F1Coil" v-show="jingInfo.F6on == 1"></view>
				<view class="F1Coil" v-show="jingInfo.F7on == 1"></view>
			</view>
			<!-- 1卷取机状态 -->
			<view class="juanCoil1 positionAbsolute" v-show="juanInfo.on1 == 1"></view>
			<!-- 2卷取机状态 -->
			<view class="juanCoil2 positionAbsolute" v-show="juanInfo.on2 == 1"></view>

			<view class="positionAbsolute bg-white coilInfo font-size22 juanPosition" v-show="juanInfo.on1 == 1 || juanInfo.on2 == 1">
				<view class=" bg-blue u-font-weight7 text-white coilInfoTitle">
					<text>卷号</text>
					<text class="margin-left-10">{{juanInfo.coilNo}}</text>
				</view>
				<view class="flex coilInfoMain">
					<view class="">
						<text class="u-font-weight6">钢种</text>
						<text class="u-font-weight">{{juanInfo.state}}</text>
					</view>
					<view class="" style="margin-left: 20upx;">
						<text class="u-font-weight6">规格</text>
						<text class="u-font-weight">{{juanInfo.gui}}</text>
					</view>
				</view>
			</view>
			<!-- FET温度 -->
			<view class="FETtempPosition positionAbsolute font-size24">
				<text class="u-font-weight6">FET</text>
				<text class="u-font-weight margin-left-10">{{jingInfo.tempFET}}℃</text>
			</view>
			<!-- FDT温度 -->
			<view class="FDTtempPosition positionAbsolute font-size24">
				<text class="u-font-weight6">FDT</text>
				<text class="u-font-weight margin-left-10">{{jingInfo.tempFDT}}℃</text>
			</view>
			<!-- CT温度 -->
			<view class="CTtempPosition positionAbsolute font-size24">
				<text class="u-font-weight6">CT</text>
				<text class="u-font-weight margin-left-10">{{juanInfo.CT}}℃</text>
			</view>
		</view>
		<!-- 精轧/卷取 -->
		<view class="flex">
			<view class="basis-df width100 jingline flex justify-center">
				<view class="flex">
					<view class="font-size24 u-font-weight">精区域</view>
					<view class="cuState font-size22">{{jingState}}</view>
					<!-- 	<view>
						<text class="font-size24 u-font-weight6">咬钢时间</text>
						<text class="font-size24 u-font-weight6 margin-left-10">00:00:00</text>
					</view> -->
				</view>
			</view>
			<view class="basis-df width100 culine flex justify-center">
				<view class="flex">
					<view class="font-size24 u-font-weight">卷取区域</view>
					<view class="cuState font-size22">{{juanState}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		post
	} from "@/lib/Util.js";
	export default {
		data() {
			return {
				cuInfo: {
					coilNo: '---',
					state: '---',
					gui: '---',
					temp: '---',
					on: 0,
					pass: 0,
				},
				cuState: '---',
				jingInfo: {
					coilNo: '---',
					state: '---',
					gui: '---',
					tempFET: '---',
					tempFDT: '---',
					F1on: 0,
					F2on: 0,
					F3on: 0,
					F4on: 0,
					F5on: 0,
					F6on: 0,
					F7on: 0
				},
				jingState: '---',
				juanInfo: {
					coilNo: '---',
					state: '---',
					gui: '---',
					CT: '---',
					on1: null,
					on2: null
				},
				juanState: '---',
				timer: null,
				Linetimer: null
			}
		},
		onLoad() {
			// #ifdef APP-PLUS
			this.timer = setTimeout(() => {
				plus.screen.unlockOrientation();
				plus.screen.lockOrientation('landscape-primary');
			}, 2000)
			// #endif
			this.getInfo()
			this.getJingInfo()
			this.getJuanInfo()
			this.Linetimer = setInterval(() => {
				this.getInfo()
				this.getJingInfo()
				this.getJuanInfo()
			}, 2000)
		},
		onUnload() {
			// #ifdef APP-PLUS
			clearTimeout(this.timer)
			this.timer = null
			clearInterval(this.Linetimer)
			this.Linetimer = null
			// #endif
			clearTimeout(this.timer)
			this.timer = null
			clearInterval(this.Linetimer)
			this.Linetimer = null
		},
		methods: {
			beforePage() {
				uni.navigateBack({
					delta: 1
				});
			},
			// 获得粗轧区域的数据
			async getInfo() {
				let temp = await post('/webservice/getHmiData', {
					tags: [{
						name: "RM_SCAN.R1ExitTemp", // RDT温度
						ts: "1"
					}]
				})
				let pass = await post('/webservice/getHmiData', {
					tags: [{
						name: "RM_SCAN.Pass", // 道次
						ts: "1"
					}]
				})
				let on = await post('/webservice/getHmiData', {
					tags: [{
						name: "RM_SCAN.R1_ON", // R1咬钢信息
						ts: "1"
					}]
				})
				let coilno = await post('/webservice/getHmiData', {
					tags: [{
						name: "RM_SCAN.CoilNo", // 钢卷号
						ts: "1"
					}]
				})
				let state = await post('/webservice/getHmiData', {
					tags: [{
						name: "RM_SET.SteelGrade", // 钢种
						ts: "1"
					}]
				})
				let CoilThk = await post('/webservice/getHmiData', {
					tags: [{
						name: "RM_SET.CoilThk", // 成品厚
						ts: "1"
					}, ]
				})
				let CoilWid = await post('/webservice/getHmiData', {
					tags: [{
						name: "RM_SET.CoilWid", // 成品宽
						ts: "1"
					}]
				})
				let RmFault = await post('/webservice/getHmiData', {
					tags: [{
						name: "RM_SCAN.RM_Fault", // 是否异常
						ts: "1"
					}]
				})
				this.cuInfo.coilNo = coilno.data.tagList[0].value
				this.cuInfo.state = state.data.tagList[0].value
				this.cuInfo.on = on.data.tagList[0].value
				this.cuInfo.pass = pass.data.tagList[0].value
				this.cuInfo.gui = Number(CoilThk.data.tagList[0].value).toFixed(2) + '*' + Number(CoilWid.data.tagList[0].value).toFixed(
					2)
				this.cuInfo.temp = temp.data.tagList[0].value
				if (RmFault.data.tagList[0].value == 1) {
					this.cuState = '故障'
				} else {
					this.cuState = '在轧'
				}
			},
			async getJingInfo() {
				let coilNo = await post('/webservice/getHmiData', {
					tags: [{
						name: "FM_SCAN.CoilNo3", // 钢卷号
						ts: "2"
					}]
				})
				let steelGrade = await post('/webservice/getHmiData', {
					tags: [{
						name: "FM_SET.SteelGrade", // 钢种
						ts: "2"
					}]
				})
				let CoilThk = await post('/webservice/getHmiData', {
					tags: [{
						name: "FM_SET.CoilThk", // 成品厚
						ts: "1"
					}, ]
				})
				let CoilWid = await post('/webservice/getHmiData', {
					tags: [{
						name: "FM_SET.CoilWid", // 成品宽
						ts: "1"
					}]
				})
				let RmFault = await post('/webservice/getHmiData', {
					tags: [{
						name: "FM_SCAN.FM_Fault", // 是否异常
						ts: "1"
					}]
				})
				let tempFDT = await post('/webservice/getHmiData', {
					tags: [{
						name: "FM_SCAN.FDT", // FDT温度
						ts: "1"
					}]
				})
				let tempFET = await post('/webservice/getHmiData', {
					tags: [{
						name: "FM_SCAN.FET", // FET温度
						ts: "1"
					}]
				})

				this.jingInfo.coilNo = coilNo.data.tagList[0].value
				this.jingInfo.state = steelGrade.data.tagList[0].value
				this.jingInfo.gui = Number(CoilThk.data.tagList[0].value).toFixed(2) + '*' + Number(CoilWid.data.tagList[0].value)
					.toFixed(2)
				this.jingInfo.tempFDT = tempFET.data.tagList[0].value
				this.jingInfo.tempFET = tempFET.data.tagList[0].value
				if (RmFault.data.tagList[0].value == 1) {
					this.jingState = '故障'
				} else {
					this.jingState = '在轧'
				}

				let F1on = await post('/webservice/getHmiData', {
					tags: [{
						name: "FM_SCAN.F1_ON", // F1咬钢信号
						ts: "2"
					}]
				})
				let F2on = await post('/webservice/getHmiData', {
					tags: [{
						name: "FM_SCAN.F2_ON", // F2咬钢信号
						ts: "2"
					}]
				})
				let F3on = await post('/webservice/getHmiData', {
					tags: [{
						name: "FM_SCAN.F3_ON", // F3咬钢信号
						ts: "2"
					}]
				})
				let F4on = await post('/webservice/getHmiData', {
					tags: [{
						name: "FM_SCAN.F4_ON", // F4咬钢信号
						ts: "2"
					}]
				})
				let F5on = await post('/webservice/getHmiData', {
					tags: [{
						name: "FM_SCAN.F5_ON", // F5咬钢信号
						ts: "2"
					}]
				})
				let F6on = await post('/webservice/getHmiData', {
					tags: [{
						name: "FM_SCAN.F6_ON", // F6咬钢信号
						ts: "2"
					}]
				})
				let F7on = await post('/webservice/getHmiData', {
					tags: [{
						name: "FM_SCAN.F7_ON", // F7咬钢信号
						ts: "2"
					}]
				})

				this.jingInfo.F1on = F1on.data.tagList[0].value
				this.jingInfo.F2on = F2on.data.tagList[0].value
				this.jingInfo.F3on = F3on.data.tagList[0].value
				this.jingInfo.F4on = F4on.data.tagList[0].value
				this.jingInfo.F5on = F5on.data.tagList[0].value
				this.jingInfo.F6on = F6on.data.tagList[0].value
				this.jingInfo.F7on = F7on.data.tagList[0].value
			},
			async getJuanInfo() {
				let steelGrade = await post('/webservice/getHmiData', {
					tags: [{
						name: "DC1_SET.SteelGrade", // 钢种
						ts: "1"
					}]
				})
				let CoilThk = await post('/webservice/getHmiData', {
					tags: [{
						name: "DC1_SET.CoilThkRaw", // 成品厚
						ts: "1"
					}, ]
				})
				let CoilWid = await post('/webservice/getHmiData', {
					tags: [{
						name: "DC1_SET.CoilWidRaw", // 成品宽
						ts: "1"
					}]
				})
				let RmFault = await post('/webservice/getHmiData', {
					tags: [{
						name: "DC1_SCAN.DC_Fault", // 是否异常
						ts: "1"
					}]
				})
				let temp = await post('/webservice/getHmiData', {
					tags: [{
						name: "DC1_SET.CoilTemp", // 温度
						ts: "2"
					}]
				})
				let coilNo = await post('/webservice/getHmiData', {
					tags: [{
						name: "DC1_SCAN.CoilNo", // 钢卷号
						ts: "1"
					}]
				})
				let coilNo2 = await post('/webservice/getHmiData', {
					tags: [{
						name: "DC2_SCAN.CoilNo", // 钢卷号
						ts: "1"
					}]
				})

				let CoilThk2 = await post('/webservice/getHmiData', {
					tags: [{
						name: "DC2_SET.CoilThkRaw", // 成品厚
						ts: "1"
					}, ]
				})
				let CoilWid2 = await post('/webservice/getHmiData', {
					tags: [{
						name: "DC2_SET.CoilWidRaw", // 成品宽
						ts: "1"
					}]
				})
				let steelGrade2 = await post('/webservice/getHmiData', {
					tags: [{
						name: "DC2_SET.SteelGrade", // 钢种
						ts: "1"
					}]
				})
				let coilon1 = await post('/webservice/getHmiData', {
					tags: [{
						name: "DC1_SCAN.ON", // 1咬钢信号
						ts: "1"
					}]
				})
				let coilon2 = await post('/webservice/getHmiData', {
					tags: [{
						name: "DC2_SCAN.ON", // 2咬钢信号
						ts: "1"
					}]
				})


				if (coilon1.data.tagList[0].value == 1) {
					this.juanInfo.coilNo = coilNo.data.tagList[0].value
					this.juanInfo.state = steelGrade.data.tagList[0].value
					this.juanInfo.gui = Number(CoilThk.data.tagList[0].value).toFixed(2) + '*' + Number(CoilWid.data.tagList[0].value)
						.toFixed(2)
				}
				if (coilon2.data.tagList[0].value == 1) {
					this.juanInfo.coilNo = coilNo2.data.tagList[0].value
					this.juanInfo.state = steelGrade2.data.tagList[0].value
					this.juanInfo.gui = Number(CoilThk2.data.tagList[0].value).toFixed(2) + '*' + Number(CoilWid2.data.tagList[0].value)
						.toFixed(2)
				}
				this.juanInfo.CT = temp.data.tagList[0].value
				this.juanInfo.on1 = coilon1.data.tagList[0].value
				this.juanInfo.on2 = coilon2.data.tagList[0].value
				if (RmFault.data.tagList[0].value == 1) {
					this.juanState = '故障'
				} else {
					this.juanState = '在轧'
				}
			}
		}
	}
</script>

<style>
	.lineBefore {
		height: 206upx;
		width: 100%;
		margin-top: 81upx;
	}

	.lineUp {
		height: 272upx;
		background-color: white;
		position: relative;
	}

	.coilInfo {
		opacity: 0.9;
		width: 358upx;
		border-radius: 6px;
		overflow: hidden;
		box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
	}

	.coilInfoTitle {
		padding: 10upx;
	}

	.coilInfoMain {
		padding: 10upx;
	}

	.hotPosition {
		top: 145upx;
		left: 130upx;
	}

	.cuPosition {
		top: 145upx;
		right: 400upx;
	}

	.jingPosition {
		top: 155upx;
		left: 130upx;
	}

	.juanPosition {
		top: 155upx;
		right: 100upx;
	}

	.culine {
		padding: 10upx;
		background-color: #EBEBEB;
	}

	.jingline {
		padding: 10upx;
		background-color: #D4D4D4;
	}

	.cuState {
		height: 30upx;
		line-height: 24upx;
		opacity: 1;
		margin: 0upx 20upx;
		background: #08d5a5;
		padding: 4upx 16upx;
		border-radius: 6upx;
	}

	.RDTtempPosition {
		top: 40upx;
		left: 51%;
	}

	.FETtempPosition {
		top: 22upx;
		left: 5%;
	}

	.FDTtempPosition {
		top: 22upx;
		left: 30%;
	}

	.CTtempPosition {
		top: 22upx;
		left: 70%;
	}

	.cuCoil {
		background-color: red;
		width: 200upx;
		height: 6upx;
		top: 46%;
		left: 33%;
	}

	.jingCoil {
		background-color: red;
		top: 48%;
		left: 3%;
	}

	.F1Coil {
		width: 60upx;
		height: 6upx;
	}

	.juanCoil1 {
		background: transparent;
		width: 50upx;
		height: 50upx;
		border: 12upx solid red;
		border-radius: 50%;
		top: 185upx;
		right: 14.5%;
	}

	.juanCoil2 {
		background: transparent;
		width: 50upx;
		height: 50upx;
		border: 12upx solid red;
		border-radius: 50%;
		top: 185upx;
		right: 2.9%;
	}
</style>
